import 'package:flutter/material.dart';
import 'package:wheel_of_fortune/candy/candy_rules_page.dart';
import 'package:wheel_of_fortune/candy/earn_candy_page.dart';
import 'package:wheel_of_fortune/candy/widgets/item_widget.dart';
import 'package:wheel_of_fortune/candy/widgets/redeem_candy.dart';
import 'package:wheel_of_fortune/provider/candy_provider.dart';
import 'package:wheel_of_fortune/utils/utils.dart';
import 'package:wheel_of_fortune/widgets/customer_button.dart';
import 'package:wheel_of_fortune/widgets/provider_widget.dart';

import 'widgets/button.dart';
import 'widgets/info.dart';

class CandyPage extends StatefulWidget {
  CandyPage({Key key}) : super(key: key);

  @override
  _CandyPageState createState() => _CandyPageState();
}

class _CandyPageState extends State<CandyPage> {
  _candy(type) {
    showModalBottomSheet(
      context: context,
      enableDrag: false,
      isScrollControlled: true,
      backgroundColor: Colors.transparent,
      builder: (c) {
        return AlertDialog(
          shape: RoundedRectangleBorder(
            side: BorderSide.none,
            borderRadius: BorderRadius.all(Radius.circular(13)),
          ),
          titlePadding: EdgeInsets.all(5),
          title: RedeemOrBuyCandy(type:type),
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return ProviderWidget<CandyProvider>(
      model: CandyProvider(),
      onModelReady: (p) => p.initData(),
      builder: (content, provider, c) {
        return Container(
          color: mainColor,
          child: Scaffold(
            appBar: AppBar(
              title: Text(
                'Candy',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 15,
                  fontWeight: FontWeight.w400,
                ),
              ),
              centerTitle: true,
            ),
            body: SingleChildScrollView(
              child: Column(
                children: [
                  Container(
                    color: mainColor,
                    width: Utils.screenWidth,
                    height: 202 + 25.0 + 57 + 25,
                    child: Stack(
                      children: [
                        Positioned(
                          top: -54 - 65.0,
                          left: 0,
                          right: 0,
                          child: Container(
                            color: mainColor,
                            child: Image.asset(
                              'assets/images/candy_header_bg.png',
                              fit: BoxFit.cover,
                            ),
                          ),
                        ),
                        Positioned(
                          left: 23,
                          top: 23,
                          child: Info(),
                        ),
                        Positioned(
                          left: 0,
                          top: 94,
                          bottom: 0,
                          child: Container(
                            width: Utils.screenWidth,
                            color: whiteColor,
                            padding: EdgeInsets.only(
                              left: 30,
                              top: 31,
                            ),
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Text(
                                  'Candy Balance',
                                  style: TextStyle(
                                    color: mainColor,
                                    fontSize: 10,
                                    fontFamily: 'Avenir Next LT Pro',
                                    fontWeight: FontWeight.bold,
                                  ),
                                ),
                                Text(
                                  '${provider.candyBalance.toInt()}',
                                  style: TextStyle(
                                    color: yellowColor,
                                    fontSize: 44,
                                    fontFamily: 'Avenir Next LT Pro',
                                    fontWeight: FontWeight.bold,
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                        Positioned(
                          right: 25,
                          top: 94 + 15.0,
                          child: ColorButton(
                            title: 'Rules',
                            onTap: () {
                              showModalBottomSheet(
                                enableDrag: false,
                                isScrollControlled: true,
                                backgroundColor: Colors.transparent,
                                context: context,
                                builder: (c) {
                                  return CandyRulesPage();
                                },
                              );
                            },
                          ),
                        ),
                        Positioned(
                          left: 0,
                          right: 0,
                          top: 202,
                          child: Container(
                            height: 0.5,
                            color: greyDBColor,
                          ),
                        ),
                        Positioned(
                          left: 0,
                          right: 0,
                          top: 202 + 25.0,
                          child: Container(
                            child: Row(
                              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                              children: [
                                Button(
                                  title: "Redeem\nCandy",
                                  onTap: () {
                                    _candy(0);
                                  },
                                ),
                                Button(
                                  title: "Buy\nCandy",
                                  onTap: () {
                                    _candy(1);
                                  },
                                ),
                                Button(
                                  title: "Earn\nCandy",
                                  onTap: () {
                                    Navigator.push(context,
                                        MaterialPageRoute(builder: (c) {
                                      return EarnCandyPage();
                                    }));
                                  },
                                ),
                              ],
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                  Container(
                    color: greyDBColor,
                    child: SizedBox(
                      height: 57,
                      width: Utils.screenWidth,
                      child: Container(
                        alignment: Alignment.centerLeft,
                        margin: EdgeInsets.only(left: 32),
                        child: Text(
                          'Transaction History',
                          style: TextStyle(color: Colors.black),
                        ),
                      ),
                    ),
                  ),
                  ListView.separated(
                    shrinkWrap: true,
                    physics: NeverScrollableScrollPhysics(),
                    itemCount: provider.recordList.length,
                    itemBuilder: (c, index) {
                      return ItemWidget(
                        type: index % 2,
                        item: provider.recordList[index],
                      );
                    },
                    separatorBuilder: (c, index) {
                      return Container(
                        height: 0.5,
                        color: greyDBColor,
                      );
                    },
                  ),
                ],
              ),
            ),
          ),
        );
      },
    );
  }
}
